<template>
	<view>
		<view class="banner">
			<!-- 轮播图 -->
			<swiper class="swiper-box" :circular="true" :autoplay="true" :indicator-dots="true">
				<swiper-item v-for="(item, index) in honorHistoryList" :key="index">
					<view class="swiper-item">
						<image :src="item.schoolUrl" mode="aspectFill" :draggable="false" />
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="title">
			<text class="iconfont" style="font-size: 22px;">&#xe8bc;</text>
			<view style="padding:0 50rpx 0 50rpx; display: inline-block;">三元小学</view><text class="iconfont"
				style="font-size: 22px">&#xe8bc;</text>
		</view>
		<view v-for="(item,index) in honorPalmaryList" :key="index">
			<view class="u-line"
				style="margin: 15rpx 0px 0px 0px; border-bottom: 5px solid rgb(243, 192, 40); width: 100%; transform: scaleY(0.5); border-top-color: rgb(243, 192, 40); border-right-color: rrgb(243, 192, 40); border-left-color: rgb(243, 192, 40);">
			</view>
			<view class="box">
				<view class="content">
					{{item.palmaryTitle}}
				</view>
			</view>
			<view class="" style="margin:15rpx; text-indent: 2em;">
				{{item.palmaryContent}}
			</view>
		</view>


	</view>

	</view>
</template>

<script>
	import {
		getHonorHistory,
		getHonorPalmary
	} from "@/api/honorHistory/honorHistory.js"
	export default {
		data() {
			return {
				honorHistoryList: [],
				honorPalmaryList: []
			}
		},
		onLoad() {
			getHonorHistory().then((res) => {
				this.honorHistoryList = res.rows;
			})
			getHonorPalmary().then((res) => {
				this.honorPalmaryList = res.rows;
			})
		},
		methods: {

		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}


	.box {
		position: relative;
		margin-top: 10rpx;
		width: 280rpx;
		height: 0rpx;
		border-top: 60rpx solid rgb(243, 192, 40);
		border-right: 40rpx solid transparent;

		.content {
			position: absolute;
			top: -50rpx;
			left: 50rpx;
			color: white;
		}

	}



	.swiper {
		height: 400rpx;
	}

	.swiper-box {
		height: 400rpx;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		height: 400rpx;
		line-height: 300rpx;
	}

	.banner {
		height: 360upx;
		overflow: hidden;
		position: relative;
		background-color: #ccc;
	}

	.title {
		margin: 50rpx auto 0;
		width: 440rpx;
		height: 80rpx;
		padding: 20rpx;
		vertical-align: middle;
		background-color: #FCC10D;
		text-align: center;
		color: white;
		border-radius: 12rpx;
		/* border: 1px solid red; */
	}

	.u-line {
		vertical-align: middle;
	}
</style>
